<template>
   <div style="height:80%" class="zhexian">
        <div class="title">每周捐赠总次数</div>
       <div id="zhexian" ></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
 import {
        onMounted,
        ref,
        reactive
    } from 'vue'
    onMounted(()=>{
var chartDom = document.getElementById('zhexian');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
     nameLocation:'middle',
 
    name:'日期',
    type: 'category',
    data: ['2021-3-8', '2021-3-15', '2021-3-22', '2021-3-29', '2021-4-5', '2021-4-12', '2021-4-19', '2021-4-26', '2021-5-3', '2021-5-10', '2021-5-17', '2021-5-24', '2021-5-31', '2021-6-7', '2021-6-14', '2021-6-21', '2021-6-28'],
     nameTextStyle: {
   padding:[20,0,0,0],
            fontSize: 16,
            color: '#333'
        }
  },
  yAxis: {
    show:true,
    nameLocation:'middle',
    type: 'value',
 axisTick: {
            show: true, // 显示y轴刻度线,
            symbol:'arrow'
        },
         axisLine: { // 设置y轴线的显示
            show: true
        },
    name:'每周捐赠总次数',
     nameTextStyle: {
          padding:[0,0,30,0],
            fontSize: 16,
            color: '#333'
        },
        
  },
 

  series: [
    {
      data: [20660, 21620, 20662, 20002, 23939, 22348, 20290, 19481, 14340, 21721, 20778, 20963, 19179, 19755, 21482, 18079, 17969],
      type: 'bar',
      label:{
        show:true,
        postion:'center'
      }
    }
  ],
};
option && myChart.setOption(option);
    })
</script>
<style  scoped>
#zhexian{
    /* border: 1px solid red; */
    flex: 1;
}
.zhexian{
    display: flex;
    flex-direction: column;
}
.title{
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}
</style>